/*
*@description: 模型管理
*@author: 作者
*@date: 2023-03-06 15:10:05
*@email: 邮箱
*/
<!--  -->
<template>
    <div class=''>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
                <span>模型管理</span>
            </div>
            <div>
                <el-row :gutter="20">
                    <el-col :span="24" style="text-align:right;" :offset="0">
                        <el-button size="small" type="primary" @click="addModel" style="margin-bottom:10px;" icon="el-icon-plus">新增</el-button>
                    </el-col>
                </el-row>
                <el-table border :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="modelType" label="模型类型">
                    </el-table-column>
                    <el-table-column prop="rate" label="学习率">
                    </el-table-column>
                    <el-table-column prop="size" label="batch-size">
                    </el-table-column>
                    <el-table-column prop="num" label="迭代次数">
                    </el-table-column>
                    </el-table-column>
                    <el-table-column prop="num" label="识别结果">
                    </el-table-column>
                </el-table>
                <!-- <el-row :gutter="20" style="margin-top:15px;">
                    <el-col :span="24" :offset="0" style="text-align:right;">
                        <el-pagination style="mar" :page-size="pageSize" :current-page="pageNum" @current-change="changePage" background layout="total, prev, pager, next" :total="total">
                        </el-pagination>
                    </el-col>
                </el-row> -->
            </div>
        </el-card>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="700px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" he>
                <el-form-item label="名称" prop="name">
                    <el-input prefix-icon="el-icon-user" style="width:350px" v-model="ruleForm.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="上传图片" prop="img">
                    <div style="display:flex;flex-wrap:wrap;">
                        <img v-for="(op,index) in imgs" :key="index" style="height:148px;margin:0 10px 10px 0;width:148px;" :src="op" />
                        <el-upload :file-list="ruleForm.img" :on-change="uploadImg" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>

                </el-form-item>
                <el-form-item label="选择模型" prop="modelType">
                    <el-select style="width:350px" v-model="ruleForm.modelType" placeholder="请选择模型">
                        <el-option v-for="item in modelData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学习率" prop="rate">
                    <el-select style="width:350px" v-model="ruleForm.rate" placeholder="请选择学习率">
                        <el-option v-for="item in rateData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="batch-size" prop="size">
                    <el-select style="width:350px" v-model="ruleForm.size" placeholder="请选择batch-size">
                        <el-option v-for="item in sizeData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="迭代次数" prop="num">
                    <el-select style="width:350px" v-model="ruleForm.num" placeholder="请选择迭代次数">
                        <el-option v-for="item in numData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="close">取 消</el-button>
                <el-button size="small" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="imgVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                imgs: [require('../../assets/img/2.png'), require('../../assets/img/1.png'),require('../../assets/img/3.png'), ],
                dialogImageUrl: '',
                tableData: [],
                imgVisible: false,
                //迭代次数
                numData: [{ label: '100', value: '100' }, { label: '150', value: '150' },
                    { label: '200', value: '200' },
                ],
                //bactch-size
                sizeData: [{ label: '16', value: '16' }, { label: '32', value: '32' },
                    { label: '64', value: '64' },
                ],
                //学习率
                rateData: [{ label: '0.1', value: '0.1' }, { label: '0.01', value: '0.01' },
                    { label: '0.001', value: '0.001' }, { label: '0.0001', value: '0.0001' },
                ],
                // 模型数据
                modelData: [{ label: 'ResNet18', value: 'ResNet18' },
                    { label: 'ResNet34', value: 'ResNet34' },
                    { label: 'ResNet50', value: 'ResNet50' },
                    { label: 'VGG16', value: 'VGG16' },
                    { label: 'GoogLeNet', value: 'GoogLeNet' },
                    { label: 'ResNet18_TransferLearning', value: 'ResNet18_TransferLearning' },
                    { label: 'ResNet18_PADC', value: 'ResNet18_PADC' },
                    { label: 'ResNet18_PADC_CBAM', value: 'ResNet18_PADC_CBAM' },
                ],
                ruleForm: {
                    name: '',
                    modelType: '',
                    size: '',
                    num: '',
                    rate: '',
                    img: [],
                },
                rules: {
                    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                    modelType: [{ required: true, message: '请选择模型', trigger: 'change' }],
                    rate: [{ required: true, message: '请选择学习率', trigger: 'change' }],
                    num: [{ required: true, message: '请选择迭代次数', trigger: 'change' }],
                    size: [{ required: true, message: '请选择batch-size', trigger: 'change' }],
                    img: [{ required: false, message: '请上传图片', trigger: 'change' }],
                },
                title: '新增模型数据',
                dialogVisible: false,

            };
        },
        computed: {},
        created() {

        },
        methods: {
            uploadImg(file, fileList) {
                console.log(file)
                console.log(fileList)
                this.ruleForm.img = fileList
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.imgVisible = true;
            },
            //弹窗关闭
            close() {
                this.$refs.ruleForm.resetFields()
                this.dialogVisible = false
            },
            //表单提交
            submit() {
                this.$refs.ruleForm.validate((value) => {
                    if (value) {
                        console.log(this.ruleForm, 'rule')
                        this.tableData.push(this.ruleForm)
                        this.dialogVisible = false
                    }
                })
            },
            //新增
            addModel() {
                this.dialogVisible = true
                this.$refs['ruleForm'].resetFields()
            }
        },
    }
</script>
<style scoped>
    .img {
        display: flex;
    }
</style>